<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>sdl</h1>
  <!-- <script src="./md5.js"></script> -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
  <script>

    const createFingerprint = () => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      ctx.fillRect(0,0,100,100)
      return md5(canvas.toDataURL())
    } 

    const ws = new WebSocket('ws://127.0.0.1:3000') 
    ws.onopen = () => {
      console.log('连接成功');
      ws.send(JSON.stringify({
        action: 'login',
        id: '123',
        fingerprint: createFingerprint()
      }))
    }
    ws.onmessage = (message) => {
      const data = JSON.parse(message.data)
      if (data.action === 'logout') {
        alert(data.message)
      }
    }
  </script>
</body>
</html>